<template>
	<view>
		<uni-nav-bar left-icon="left" backgroundColor="rgb(77, 139, 246)" :border="false" color="#fff"
			@clickLeft="onClickNavBack">
			<view class="nav-title">设置支付密码</view>
		</uni-nav-bar>
		<view class="content">
			<uni-forms style="border-bottom: 1px #eee solid;" label-position="top" :border="true">
				<uni-forms-item label="支付密码">
					<uni-easyinput :inputBorder="false" v-model="passwordInfo.password" placeholder="6-12位的字母、数字"
						@focus="openKeyboard" />
				</uni-forms-item>
			</uni-forms>
			<button style="border-radius: 50px;height: 35px;font-size: 14px;margin-top: 20px;"
				class="align-center justify-center" type="primary" hover-class="none" @click="next">下一步</button>
		</view>


	</view>
</template>

<script setup>
	import ccCodeDialog from '@/uni_modules/cc-codeDialog/components/cc-codeDialog/cc-codeDialog.vue'

	import {
		ref,

	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import bankAcountApi from '@/sheep/api/member/bankAcount';
	import sheep from '@/sheep';
	const passwordInfo = ref({

		token: uni.getStorageSync('setPasswordToken') || '',
		userId: uni.getStorageSync('userId') || '',
		randomKey: '',
		password: ''
	})


	const onClickNavBack = () => {
		uni.navigateBack()
	}

	const openKeyboard = async () => {
		uni.hideKeyboard()
		//获取密码因子
		let data = {
			userId: passwordInfo.value.userId
		}
		let res = await bankAcountApi.getAcctmgrRandom(data)
		console.log('获取密码因子', res);

		//获取密码控件token
		let resp = await bankAcountApi.getAcctmgrPasswordToken({
			passwordScene: 'setting_password'
		})
		console.log('获取密码控件token', resp);

		if (res.data.ret_code == "0000") {
			// 以下参数通过服务端获取
			lianlianpay.invokePasswordControl({
				/**
				 * passwordScene 使用场景
				 * setting_password-设置密码
				 * change_password-修改密码
				 * bind_card_password-换绑卡
				 * cashout_password-提现
				 * pay_password-支付
				 */
				passwordScene: 'setting_password',
				oidPartner: res.data.oid_partner, // 商户号
				userId: res.data.user_id, // 用户号
				passwordElementToken: resp.data, // 向服务端请求生成的 token
				env: 'production', // 默认 production-生产
				styles: { // 样式集合
					themeColor: '#0E59F0', // 主题颜色（按钮等）
				}
			}, (res) => {
				console.log('密码数据', res)
				let data = {

				}
			})
		}

	}


	const next = async () => {
		// verifyShow.value = true

		if (passwordInfo.value.password == '' || !/^[a-zA-Z0-9]{6,12}$/.test(verifyInfo.value.phone)) {
			uni.showToast({
				title: '请输入账户支付密码',
				icon: 'none'
			})
			return
		}
		if (!passwordInfo.value.token) {
			uni.showToast({
				title: '请先验证手机号',
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/me/components/verifyPhone'
				})
			}, 3000)
			return
		}


		let res = await bankAcountApi.regphoneVerifycodeVerify(verifyInfo.value)
		console.log('绑定手机验证码验证', res)
		if (res.code == 0) {
			if (res.data.ret_code == '0000') {
				uni.showToast({
					title: '验证通过',
					icon: 'success'
				})
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/me/components/bankAcount'
					})
				}, 3000)

			} else {
				uni.showToast({
					title: res.data.ret_msg,
					icon: 'none'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: transparent;
	}

	.nav-title {
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-items: center;
		justify-content: center;
		flex: 1;
	}

	.content {
		padding: 20px;
		box-sizing: border-box;
	}

	.verifyCode-box {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.send {
			padding: 5px 10px;
			box-sizing: border-box;
			background: #007AFF;
			color: white;
			border-radius: 50px;
			font-size: 11px;
		}

		.countdown {
			padding: 5px 10px;
			box-sizing: border-box;
			font-size: 14px;

		}
	}
</style>